<template>
	<view>
		<view class="driver_info-wrap tp-w690" @click="goToDriverMap()">
			<view class="info-wrap">
				<view class="avatar">
					<image :src="info.avatar" mode=""></image>
				</view>
				<view class="info">
					<view class="driver">
						<text class="name">{{info.name}}</text>
						<view class="score">
							<uni-rate disabled class="uni_rate" size="16" margin="4" :value="info.goal / 20"></uni-rate>
						</view>
					</view>
					<view class="car">
						<text class="num">{{info.carNumber}}</text>
						<text class="type">{{info.carName}}</text>
					</view>
				</view>
			</view>
			<image class="address-icon" src="../../pagesUser/static/address-icon.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			info: {
				type: Object
			}
		},
		data() {
			return {};
		},
		methods: {
			// 去司机定位详情
			goToDriverMap() {
				uni.navigateTo({
					url: '../../pagesUser/driverMap?id=' + this.info.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.driver_info-wrap {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 12rpx;
		height: 140rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		background-color: #fff;

		.info-wrap {
			display: flex;

			.avatar {
				height: 80rpx;
				width: 80rpx;
				border-radius: 50%;
				overflow: hidden;
				background-color: pink;
				margin-right: 20rpx;
				overflow: hidden;
			}

			.info {
				font-size: 26rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.driver {
					display: flex;
					align-items: center;

					.name {
						margin-right: 32rpx;
					}
				}

				.car {
					.num {
						margin-right: 40rpx;
					}
				}
			}
		}

		.address-icon {
			height: 64rpx;
			width: 64rpx;
		}
	}
</style>
